<template>
  <div>
    <div class='container page'>
    <!-- <swiper class="swiper" :indicator-dots="indicatorDots" autoplay="true" interval="4000" duration="1000">
        <block v-for="(item, index) in images" :index="index" :key="item">
            <swiper-item @click="swipclick(item.id)">
                <image :src="item.url" class="slide-image" mode="aspectFill" />
            </swiper-item>
        </block>
    </swiper> -->

    <!-- <div class="index">
      <div>
        <p class="item1">上证指数</p>
        <p class="item2">2888</p>
        <h1 class="item3">
          <p>33.1</p>
          <p>1.15%</p>
        </h1>
      </div>
      <div>
        <p class="item1">上证指数</p>
        <p class="item2">1231</p>
        <h1 class="item3">
          <p>33.1</p>
          <p>1.15%</p>
        </h1>
      </div>
      <div>
        <p class="item1">上证指数</p>
        <p class="item2">1231</p>
        <h1 class="item3">
          <p>33.1</p>
          <p>1.15%</p>
        </h1>
      </div>
    </div> -->

    <div class="tab">
      <div class="tab1" v-bind:class="{choose: tabA === 0}" v-on:click="chooseTab(0)">盘手榜单</div>
      <div class="tab2" v-bind:class="{choose: tabA === 1}" v-on:click="chooseTab(1)">交易追踪</div>
      <!-- <div class="tab2" v-bind:class="{choose: tabA === 'b'}" v-on:click="chooseTab('b')">盘手动态</div> -->
    </div>
    <!-- <swiper class="content" :duration="50" :style="'height: 100rpx'" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
      <swiper-item>
        <div>1111111111</div>
      </swiper-item>
      <swiper-item>
        <div>22222222222</div>
      </swiper-item>
    </swiper> -->

    <div class="con">
      <div v-if="tabA === 0">
        <div class="itemB">
        <div class="title">
          <p>月收益榜</p>
          <!-- <p style="text-align:right;">更多</p> -->
        </div>
        <div class="index">
          <div :key="rank" v-for="rank of playerRank.month">

            <p @click="userInfo1(rank.n, rank.a, rank.b, rank.c)">
            <!-- <span style="color:#fa4006;">{{rank.r}}</span> -->
            <span v-if="rank.r === 1" style="flex:3;color:#fa4006;">冠军</span>
            <span v-if="rank.r === 2" style="flex:3;color:#fa4006;">亚军</span>
            <span v-if="rank.r === 3" style="flex:3;color:#fa4006;">季军</span>
            <span style="flex:7;color:#fff">{{rank.n}}</span>
            <span style="flex:9">收益率 {{rank.m}}%</span>
            <span>>></span>
            <div class="img_bg" v-if="rank.r !== 3" style="margin-bottom:0rpx;margin-top:-20rpx;">
              <img src="https://www.rrjiaoyi.com/static/rr-min/search/cb_bg_shine@3x.png" mode="widthFix">
            </div>
            </p>

            <!-- <p class="item1" v-if="rank.r === 1">冠军</p>
            <p class="item1" v-if="rank.r === 2">亚军</p>
            <p class="item1" v-if="rank.r === 3">季军</p>
            <p class="item2" @click="userInfo1(rank.n, rank.a, rank.b, rank.c)">
              <img class="headimg" :style="{'backgroundImage': 'url(' + bgurl + ');'}" :src="rank.a" mode="widthFix">
            </p>
            <h1 class="item3">
              <p style="color:#d0e3ee;">{{ rank.n }}</p>
              <p>{{ rank.m }}%</p>
            </h1> -->

          </div>
        </div>
        </div>

        <div class="itemB">
        <div class="title">
          <p>连续达标榜 (连续月收益5%以上)</p>
        </div>
        <div class="index">
          <div :key="rank" v-for="rank of playerRank.continuity">

            <p @click="userInfo2(rank.n, rank.t, rank.a, rank.b)">
            <!-- <span style="color:#fa4006;">{{rank.r}}</span> -->
            <span v-if="rank.r === 1" style="flex:3;color:#fa4006;">冠军</span>
            <span v-if="rank.r === 2" style="flex:3;color:#fa4006;">亚军</span>
            <span v-if="rank.r === 3" style="flex:3;color:#fa4006;">季军</span>
            <span style="flex:7;color:#fff">{{rank.n}}</span>
            <span style="flex:9">{{rank.c}}个月</span>
            <span>>></span>
            <div class="img_bg" v-if="rank.r !== 3" style="margin-bottom:0rpx;margin-top:-20rpx;">
              <img src="https://www.rrjiaoyi.com/static/rr-min/search/cb_bg_shine@3x.png" mode="widthFix">
            </div>
            </p>

            <!-- <p class="item1" v-if="rank.r === 1">冠军</p>
            <p class="item1" v-if="rank.r === 2">亚军</p>
            <p class="item1" v-if="rank.r === 3">季军</p>
            <p class="item2" @click="userInfo2(rank.n, rank.t, rank.a, rank.b)">
              <img class="headimg" :style="{'backgroundImage': 'url(' + bgurl + ');'}" :src="rank.t" mode="widthFix">
            </p>
            <h1 class="item3">
              <p style="color:#d0e3ee;">{{ rank.n }}</p>
              <p>{{ rank.c }}个月</p>
            </h1> -->
          </div>
        </div>
        </div>

        <div class="itemB">
        <div class="title">
          <p>累积收益榜</p>
        </div>
        <div class="index">
          <div :key="rank" v-for="rank of playerRank.total">

            <p @click="userInfo2(rank.n, rank.t, rank.a, rank.b)">
            <!-- <span style="color:#fa4006;">{{rank.r}}</span> -->
            <span v-if="rank.r === 1" style="flex:3;color:#fa4006;">冠军</span>
            <span v-if="rank.r === 2" style="flex:3;color:#fa4006;">亚军</span>
            <span v-if="rank.r === 3" style="flex:3;color:#fa4006;">季军</span>
            <span style="flex:7;color:#fff">{{rank.n}}</span>
            <span style="flex:9">收益率 {{rank.c}}</span>
            <span>>></span>
            <div class="img_bg" v-if="rank.r !== 3" style="margin-bottom:0rpx;margin-top:-20rpx;">
              <img src="https://www.rrjiaoyi.com/static/rr-min/search/cb_bg_shine@3x.png" mode="widthFix">
            </div>
            </p>


            <!-- <p class="item1" v-if="rank.r === 1">冠军</p>
            <p class="item1" v-if="rank.r === 2">亚军</p>
            <p class="item1" v-if="rank.r === 3">季军</p>
            <p class="item2" @click="userInfo3(rank.n, rank.t, rank.a, rank.b)">
              <img class="headimg" :style="{'backgroundImage': 'url(' + bgurl + ');'}" :src="rank.t" mode="widthFix">
            </p>
            <h1 class="item3">
              <p style="color:#d0e3ee;">{{ rank.n }}</p>
              <p>{{ rank.c }}</p>
            </h1> -->
          </div>
        </div>
        </div>

        <div class="itemB">
        <div class="title">
          <p>稳健盘手榜</p>
        </div>
        <div class="index">
          <div :key="rank" v-for="rank of playerRank.steady">

            <p @click="userInfo4(rank.n, rank.a, rank.b, rank.c)">
            <!-- <span style="color:#fa4006;">{{rank.r}}</span> -->
            <span v-if="rank.r === 1" style="flex:3;color:#fa4006;">冠军</span>
            <span v-if="rank.r === 2" style="flex:3;color:#fa4006;">亚军</span>
            <span v-if="rank.r === 3" style="flex:3;color:#fa4006;">季军</span>
            <span style="flex:7;color:#fff">{{rank.n}}</span>
            <span style="flex:9">历史回撤{{rank.v}}%</span>
            <span>>></span>
            <div class="img_bg" v-if="rank.r !== 3" style="margin-bottom:0rpx;margin-top:-20rpx;">
              <img src="https://www.rrjiaoyi.com/static/rr-min/search/cb_bg_shine@3x.png" mode="widthFix">
            </div>
            </p>


            <!-- <p class="item1" v-if="rank.r === 1">冠军</p>
            <p class="item1" v-if="rank.r === 2">亚军</p>
            <p class="item1" v-if="rank.r === 3">季军</p>
            <p class="item2" @click="userInfo4(rank.n, rank.a, rank.b, rank.c)">
              <img class="headimg" :style="{'backgroundImage': 'url(' + bgurl + ');'}" :src="rank.a" mode="widthFix">
            </p>
            <h1 class="item3">
              <p style="color:#d0e3ee;">{{ rank.n }}</p>
              <p>回撤率{{ rank.v }}%</p>
            </h1> -->
          </div>
        </div>
        </div>

      </div>

      <div class="itemA" v-if="tabA === 1" :key="article" v-for="article of allTrading">
        <div>
          <p>{{ article.stock_name }}<span class="code">{{ article.stock_code }}</span> </p>
          <p class="trad"><span>买入</span><span style="color:#25869e">/卖出</span>:<span>{{ article.buy_num }}</span><span>/</span><span style="color:#25869e">{{ article.sell_num }}</span></p>
        </div>
        <div>
          <p class="user red" v-if="article.content === '盘手关注度上升'">盘手关注度上升</p>
          <p class="user green" v-else>盘手关注度下降</p>
          <p class="average">成交均价:<span class="">{{ article.buy_avg }}</span><span>/</span><span class="">{{ article.sell_avg }}</span></p>
        </div>
        <!-- <div class="img"><img class="img2" src="/static/images/news/jiantouyou.png"></div>    -->
      </div>

      <!-- <div class="itemB" v-if="tabA === 'b'">
        <p>1312313213</p>
        <p>1312313213</p>
        <p>1312313213</p>
        <p>1312313213</p>
        <p>1312313213</p>
      </div> -->

    </div>
      <!-- <button bindtap="changeIndicatorDots"> indicator-dots </button>
      <button bindtap="changeAutoplay"> autoplay </button>
      <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
      <slider bindchange="durationChange" show-value min="1000" max="10000"/> duration -->

    <!-- <div class="scroll-x">
      <ul>
        <li :key="classify" v-for="classify of Menu" v-bind:class="{active: classify === classifyA}" v-on:click="choose(classify)">{{classify}}</li>
      </ul>
    </div> -->
    <!--con-->
    <!-- <div style="padding-top: 150rpx"></div> -->

    <!-- <div  v-if="classifyA === '推荐'">
      <p style="color: white;text-align:center;">{{refresh}}</p>
        <div :key="article" v-for="article of recommendArticle" class="art">
          <div class="a" v-if="article[0].num === 0">
            <div class="thumbnail" @click='jumpClick(article[0].html, article[0].title)'>
              <h4>{{article[0].title}}<br><h6>{{article[0].summary}}</h6></h4>
            </div>
          </div>
          <div class="a" v-if="article[0].num !== 0">
            <div class="thumbnail" @click='jumpClick(article[0].html, article[0].title)'>
              <img :src="article[0].image_one" alt="" style="width: 100%;margin-bottom: 1rem;">
              <h4>{{article[0].title}}<br><h6>{{article[0].summary}}</h6></h4>
            </div>
          </div>
        </div>
        <p @click="up" class="up">刷新</p>
        <p style="height: 40rpx;"></p>
        <br>
    </div> -->

    <!-- <div v-if="classifyA !== '推荐'" :key="article" v-for="article of allArticle.article_con" class="art">
      <div class="a">
        <div class="thumbnail" @click='jumpClick(article.html, article.title)'>
          <h4>{{article.title}}<br><h6>{{article.summary}}</h6></h4>
        </div>
      </div>
    </div> -->

    <!-- <p style="height:300rpx"></p> -->
    </div>
  </div>
</template>
<script>

import {get, post} from '@/util'
import {get2, post2} from '@/server/api'
// import Card from '@/components/Card'
// import TopSwiper from '@/components/TopSwiper'
export default {
  components: {
    // Card,
    // TopSwiper
  },
  data () {
    return {
      bgurl: 'https://www.rrjiaoyi.com/static/rr-min/group/cb_bg_tx@3x.png',
      playerRank: [],
      userinfo: {
        avatarUrl: 'http://116.62.67.174:10009/stock/httpServiceImpl/image/2017-01-01/df_avatar.png',
        nickName: ''
      },
      // tab
      tabA: 0,
      ad: [],
      refresh: '下拉刷新有毒慎用',
      getTrading: [],
      allTrading: [],
      tradingList: [],
      books: [],
      page: 0,
      more: true,
      tops: [],
      classifyA: '推荐',
      Menu: [
        '推荐',
        '时尚',
        '美食',
        '健康',
        '幽默',
        '教育',
        '文摘',
        '科技',
        '汽车',
        '体娱',
        '旅行'
      ],
      images: [
        {
          id: '1',
          url:'https://www.rrjiaoyi.com/ad/small/ad2.png'
        }
        // {
        //   id: '2',
        //   url:'https://www.rrjiaoyi.com/ad/small/ad.png'
        // },
        // {
        //   id: '3',
        //   url:'https://www.rrjiaoyi.com/ad/small/ad.png'
        // }
      ],
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000
    }
  },
  onShareAppMessage() {
    return {
      title: `${wx.getStorageSync('userinfo').nickName}邀请你一起讨论`,
      imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share_trade.png',
      path: `/pages/me/main?sharepath=news`
    }
  },
  // onShareAppMessage() {
  //   return {
  //     title: `${wx.getStorageSync('userinfo').nickName}邀请你使用测股吧`,
  //     path: `/pages/me/main`
  //   }
  // },
  methods: {
    // 点击头像查看用户信息
    userInfo1 (name, img, userId, accountId) {
      wx.navigateTo({
        url: `/pages/trader/main?img=${encodeURIComponent(img)}&name=${name}&user=${userId}&account=${accountId}`
      })
    },
    userInfo2 (name, img, userId, accountId) {
      wx.navigateTo({
        url: `/pages/trader/main?img=${encodeURIComponent(img)}&name=${name}&user=${userId}&account=${accountId}`
      })
    },
    userInfo3 (name, img, userId, accountId) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/trader/main?img=${encodeURIComponent(img)}&name=${name}&user=${userId}&account=${accountId}`
      })
    },
    userInfo4 (name, img, userId, accountId) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/trader/main?img=${encodeURIComponent(img)}&name=${name}&user=${userId}&account=${accountId}`
      })
    },
    swiperChange(e) {
      // console.log(e)
      this.currentTab = e.mp.detail.current;
      // this.activeIndex = this.currentTab;
      this.tabA = this.currentTab
    },
    // 高手榜单
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    // chooseTab
    chooseTab(x) {
      this.tabA = x;
    },
    // ad
    async adGet() {
      // wx.setStorage({
      //     key:"ad",
      //     data: await get2('api/ad', {})
      // })
      return await get2('api/ad', {})
    },
    // 跳小程序
    swipclick(e) {
      console.log('ad', this.ad)
      // console.log('ad2', wx.getStorageSync('ad').data[0].a1)
      switch (e) {
        case '1':
          // let a = {
          // appId: "wx698b6efdee816498",
          // path: "page/news/index",
          // extarData: {
          //   open: 'auth'
          // },
          // success(res) {
          // }
          // }
          // console.log('a', a)
          // wx.navigateToMiniProgram(a) 
          wx.navigateTo({
            url: `/pages/web-view/main?path=${encodeURIComponent('https://mp.weixin.qq.com/s/q726j7HWw_fTwUtSOH7Shw')}`
          })
          break
        case '2':
          let b = {
          appId: "wx698b6efdee816498",
          path: "page/news/index",
          extarData: {
            open: 'auth'
          },
          success(res) {
          }
          }
          console.log('b', b)
          wx.navigateToMiniProgram(b) 
          break
      }
    },
    // up() {
    // this.getList()
    // wx.pageScrollTo({
    // scrollTop: 0,
    // duration: 0
    // })
    // },
    jumpClick (art, title) {
      // console.log(`/pages/web-view/main?path=${encodeURIComponent(art)}`)
      // window.sessionStorage.setItem('art', JSON.stringify({url: url, title: title}))
      wx.setStorage({
        key: 'art',
        data: `${JSON.stringify({url: art, title: title})}`
      })
      wx.navigateTo({
        url: `/pages/web-view/main?path=${encodeURIComponent(art)}`
      })
    },
    // deal
    async getList (page) {
      // wx.showModal({
      //       title: '博格丹危机',  
      //       content: '是否刷博格丹',  
      //       success: function(res) {  
      //           if (res.confirm) {  
      //           console.log('100W')  
      //           } else if (res.cancel) {  
      //           console.log('掉线')  
      //           }  
      //       }  
      // })
      // wx.showNavigationBarLoading()
      // let page = this.page
      // let pcid = wx.getStorageSync('pcid')
      let reslist = await post('minipro/DealFollow', {}, {'sign': 'rrjyw', 'page': page})
      // this.getTrading = reslist.result
      // 下拉刷新，不能直接覆盖 而是累加
      this.getTrading = this.getTrading.concat(reslist.result)
      // wx.hideNavigationBarLoading()
      // console.log('getTrading', this.getTrading)
    },
    // async choose(tab) {
    //   this.classifyA = tab
    //   wx.showNavigationBarLoading()
    //   const allArticle = await post(`article/bytype?type=${tab}`)
    //   // console.log('allArticle', allArticle)
    //   this.allArticle = allArticle
    //   wx.hideNavigationBarLoading()
    // }
    // async getList (init) {
    //   if (init) {
    //     this.page = 0
    //     this.more = true
    //   }
    //   wx.showNavigationBarLoading()
    //   const books = await get('/weapp/booklist', {page: this.page})
    //   if (books.list.length < 10 && this.page > 0) {
    //     this.more = false
    //     console.log(this.more)
    //   }
    //   if (init) {
    //     this.books = books.list
    //     wx.stopPullDownRefresh()
    //   } else {
    //     // 下拉刷新，不能直接覆盖books 而是累加
    //     this.books = this.books.concat(books.list)
    //   }

    //   wx.hideNavigationBarLoading()
    // },
    // async getTop () {
    //   const tops = await get('/weapp/top')
    //   this.tops = tops.list
    // }
  },
  onPullDownRefresh () {
    // this.getList(true)
    // this.getTop()

    // this.getList()
    // console.log('1111')

    // wx.stopPullDownRefresh()
  },
  // 底部上拉
  onReachBottom () {
    // console.log('aaaaaaaaaa')
    // wx.pageScrollTo({
    // scrollTop: 0,
    // duration: 0
    // })
    if (this.tabA === 1) {
      // 显示加载图标
      wx.showLoading({
        title: ''
      })
      if (this.page < 3) {
        // 没有更多了
        // return false
        // console.log('this.page1', this.page)

        this.getList(this.page)
        this.page = this.page + 1
        // 隐藏加载框
        setTimeout(() => {
          this.allTrading = this.getTrading
          wx.hideLoading();
        }, 500)
        // console.log('this.page2', this.page)
      } else {
        this.page = 0
        this.getList(0)
        // 隐藏加载框
        setTimeout(() => {
          this.allTrading = this.getTrading
          wx.hideLoading();
        }, 500)
      }
    }
  },
  // beforeCreate() {
  // },
  created () {
    // ad
    // this.adGet()
    // .then(result => {
    //   this.ad = result.data
    // })
  },
  onShow () {
    // console.log('onShow')
    // console.log('this.page', this.page)
    if(this.page > 2) {
      Object.assign(this.$data, this.$options.data())
    }

    // 高手榜单
    this.player().then(result => {
      // wx.showLoading({
      //   title: ''
      // })
      // console.log('player', result);

      // wx.hideLoading();

      // setTimeout(() => {
          this.playerRank = result
          // console.log('playerRank', result);
      //     wx.hideLoading();
      // }, 3000)
      
      // wx.hideLoading();
      // console.log('joke', result);
    });

    // 交易追踪
    this.getList(this.page)
    this.page = this.page + 1
    setTimeout(()=>{
      this.allTrading = this.getTrading
    }, 200)
    
    // 定位
    // wx.getLocation({
    //   type: 'wgs84',
    //   success: function(res){
    //     console.log("定位成功");
    //     var locationString = res.latitude + "," + res.longitude;
    //     wx.request({
    //       url: 'http://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=1',
    //       data: {
    //         "key" : "YLFBZ-WHAWI-ZXUGH-53Q65-TOJ7E-ADBNQ",
    //         "location" : locationString
    //       },
    //       method: 'GET',
    //       // header: {}, 
    //       success: function(res){
    //         // success
    //         console.log("请求成功");
    //         console.log("请求数据:" + res.data.result.address);
    //       },
    //       fail: function() {
    //         // fail
    //         console.log("请求失败");
    //       },
    //       complete: function() {
    //         // complete
    //         console.log("请求完成");
    //       }
    //     })
    //   },
    //   fail: function() {
    //     // fail
    //     console.log("定位失败");
    //   },
    //   complete: function() {
    //     // complete
    //     console.log("定位完成");
    //   }
    // })
  },
  // 加载时
  onReady() {
    // this.getList(this.page)
    // this.page = this.page + 1
    // console.log('this.page1', this.page)
  },
  mounted () {
    // 分享
    // let sharepath = this.$root.$mp.query.sharepath
    // if (sharepath) {
    //   wx.navigateTo({
    //     url: `/pages/web-view/main?path=${sharepath}`
    //   })
    // }

    // this.getList(true)
    // this.getTop()
  },
  // 轮播
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
  // swipclick: function (e) {
  //     // console.log(this.data.imageUrls[this.data.current]);
  //     console.log('1111111111111');
  // }
}
</script>
<style lang='scss'>
.container{
  font-size: 30rpx;
  color: white;
  // background-color: #070d1b;
  // width: 100%;
  // line-height: 100%;
  // opacity: 0.7;
}
page {
  background-color: #090f1d;
  // background-color: #070d1b;
  // background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  // background-image: url("https://www.rrjiaoyi.com/static/rr-min/common/bg@3x.png");
  width: 100%;
  height: 100%;
}
// .page {
//   // background-color: rgb(219, 219, 219);
//   background-color: #070d1b;
//   // color: white;
//   // font-size: 12px;
//   font-size: 30rpx;
// }

// scroll-x
.scroll-x {
  font-size: 12px;
  z-index: 5;
  position: fixed;
  width: 750rpx;
  overflow-x: auto;
  -webkit-overflow-x: auto;
  overflow: hidden;
  -webkit-overflow-x: hidden;
  background-color: #1B1A20;
  margin: 0 auto;
  /*width: 25rem;*/
  -webkit-overflow-x: scroll;
  overflow-x: scroll;/*水平方向，超出部分添加滚动机制*/
  li {
    padding: 0 20rpx;
  }
  .active {
    color: #333;
    background-color: #FFD45A;
    border-radius: 5px;
    padding: 0 20rpx;
  }
  ul {
    display: flex;
    li {
      height: 60rpx;
      line-height: 60rpx;
      // color: white;
      flex: 1;
      white-space:nowrap; //不换行
      margin: 40rpx;
      // color: red;
    }
  }
  span {
    width: 500px;
  }
}
.art {
  padding:0 15rpx;
  text-align: left;
  .a {
    padding: 15rpx;
    text-decoration:none;
    h4 {
      line-height: 40rpx;
      font-size: 16px;
      color: #333;
    }
    h6 {
      font-size: 12px;
      color: #777
    }
  }
}
.thumbnail {
  color: black;
  display: block;
  padding: 20rpx;
  margin-bottom: 10rpx;
  // line-height: 1.42857143;
  // background-color: #070d1b;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px
}
.up {
  text-align: center;
  color: #333;
  margin: 20rpx 35rpx;
  background-color: white;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 4px
  // margin-bottom: 40rpx;
}
.swiper {
  // height: 176rpx !important;
  height: 300rpx !important;
  // padding: 20rpx 30rpx;
}
.slide-image {
  height: 100%;
  width: 100%;
}
.tab {
  margin: 0 50rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/news/ps_dh_bg@3x.png");
  // margin-top: 10rpx;
  padding-top: 10rpx;
  // background-color: #fff;
  // background-color: #070d1b;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  div {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    flex: 1;
    color: white;
  }
  .choose {
    // background-color: #F4F4F4;
    // border-bottom: 5rpx solid #F56C6C;
    // color: #F56C6C;
    color: #44CFDC;
    // border-bottom: 5rpx solid rgb(62, 207, 221);
    // color: rgb(62, 207, 221);
    // height: 80rpx;
    // line-height: 80rpx;
  }
}
.con {
  // background-color: #070d1b;
  // background-color: #fff;
  // padding: 50rpx;
}
.itemA {
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/news/jy_bg_jyzz@3x.png");
  margin: 30rpx 50rpx;
  padding: 30rpx;
  padding-bottom: 80rpx;
  color: #42cedb;
  // width: 100%;
  display: flex;
  div {
    flex: 7;
    height: 50rpx;
    line-height: 50rpx;
  }
  .img {
    flex: 1;
    padding-right: 80rpx;
    height: 100rpx;
    line-height: 100rpx;
  }
  .img2 {
    width: 40rpx;
    height: 40rpx;
  }
  .code {
    color: #2daebb;
    // color: white;
  }
  .trad {
    // color: #909399;
    color: #47d8e2;
    font-size: 24rpx;
  }
  .average {
    // color: #909399;
    color: #d0e3ee;
    font-size: 24rpx;
  }
  .user {
    font-size: 24rpx;
  }
}
.red {
  color:#fa4006;
}
.green {
  color:#0fbb53;
}
// 高手榜单
.userinfo{
  // padding-top:100rpx;
  text-align:center;
  // margin-bottom: 100rpx;
  font-size: 20rpx;
  img{
    width: 150rpx;
    height:150rpx;
    margin: 10rpx;
    border-radius: 50%;
  }
}
.btn {
 background-color:#EAA200;
 width: 650rpx;
//  hover: black;
}
.button {
  hover-class: none;
}
.b {
  text-align: center;
  margin: 50rpx;
  padding: 50rpx;
  background-color: white;
  // width: 750rpx;
  border-radius: 5px;
  .img1 {
    // height: 200rpx;
    width: 400rpx;
    margin: 50rpx;
  }
  .img2{
    width: 550rpx;
    margin: 50rpx 0;
  }
  p {
    /*height: 1rem;*/
    // text-align: center;
    font-size: 12px;
    color: #EAA200;
    // color: #17bbef;
    margin: 20rpx 0;
  }
}
.index {
  margin: 20rpx 10rpx;
  margin-top:50rpx;
  p {
    text-align: center;
    display: flex;
  }
  span{
    color:#2ac0d9;
    margin: 10rpx;
    flex: 1;
    .special {
      flex: 2;
    }
  }
  // margin-bottom: 10rpx;
  // background-color: #fff;
  // background-color: #070d1b;
  // display: flex;
  div {
    // background-color: #F4F4F4;
    // background-color: #070d1b;
    // margin: 20rpx;
    // padding: 20rpx;
    text-align: center;
    // flex: 1;
    // white-space:nowrap; //不换行
  }
  .item1{
    // color: #585858;
    color: #f63407;
  }
  .item2{
    font-size: 48rpx;
    font-weight: bold;
    // color: #F56C6C;
    color: rgb(62, 207, 221);
  }
  .item3{
      // display: flex;
      // color: #F56C6C;
      // color: rgb(62, 207, 221);
      color:#2ac0d9;
  }
}
.title {
  // margin: 0 30rpx;
  display: flex;
  // background-color: white;
  // background-color: #070d1b;
  // color: #585858;
  color: white;
  font-size: 30rpx;
  p {
    flex: 1;
    padding-top: 15rpx;
    padding-left: 20rpx;
    margin-bottom: -10rpx;
  }
}
.itemB {
  margin: 0 50rpx;
  margin-top: 20rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/news/ps_bg_bd@3x.png");
}
.headimg {
  // width: 50rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  width: 35%;
  padding: 15rpx;
}
.buy {
  padding:10rpx;
  width: 50rpx;
  height: 50rpx;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 50px
}
</style>
